# ============================================
# 知识点
# BOM与DOM操作
# #截至目前为止我们虽然已经学会了js语法但是你会发现跟浏览器和html文件还是一点关系没
# 有BOM
# 浏览器对象模型
# Browser object Model
# js代码操作浏览器
# DOM
# 文档对象模型Document object Model
# js代码操作标签
# ============================================
# BOM操作
# # window对象
# window对象指代的就是浏览器窗口
# ============================================
# window.innerHeight  浏览览器 窗口的高度
# 900
# window.innerwidth   浏览器窗口的宽度
# 1680
# window.open( ' https: / /www . mz itu.com/','', 'height=400px, width=400px, top=400px, left=400px')
# #新建窗口打开页面第二个参数写空即可第三个参数写新建的窗口的大小和位置
# #扩展父子页面通信window. opener()了 解
# window. close()关闭当前页面
# --------------------------------------------
# window.navigator.userAgent 返回请求用户
# window.navigator.platform 用户系统 win32
# --------------------------------------------
# window. history .back( ) 回退到上一页
# window. history . forward( ) 前进到下一页
#对应的就是你浏览器左上方的两个的箭头
# --------------------------------------------
# window.location.href    获取当前页面的url
# window.location.href = url 跳转指定的url
# window.location.reload 属性页面，重新加载
# --------------------------------------------
# alert('你不要过来啊! ! ! ')   警告
# undefined
# confirm( '你确定真的要这么做吗?能不能有其他方式能够满足你...')   确认
# false
# confirm( '你确定真的要这么做吗?能不能有其他方式能够满足你...')
# true
# prompt( '手牌号给我看一下'，22号消费888')    提示
# "来宾三位"
# --------------------------------------------
# 计时器相关
# ●过一段时间之后触发(一次)
# ●每隔一段时间触发一次(循环)
# <script>
# function func1() {
# alert(123)
# let t = setTimeout(func1,3000); //毫秒为单位3秒之后自动执行func1函数
# clearTimeout(t)
# //取消定时任务 如果你想要清除定时任务需要日前用变量
# 指代定时任务
# function func2() {
# alert(123)
# ]
# function show(){
# let t = setInterval ( func2,3000); // 每隔3秒执行- -次
# function inner(){
# clearInterval(t) // 清除定时器
# }
# setT imeout( inner, 9000) // 9秒中之后触发
# show( )
# </ script>|
# ============================================
# DOM操作
# ============================================
# ●直接查找(必须要掌握)
# id查找
# 类查找
# 标签查找
# #注意三个方法的返回值是不一样的
# document . getElementById('d1')
# <div id=o"d.">...</div>. 
# document . getEl ementsByClassName( 'c1')
# HTMLCollection [p.c1]0: p.cllength: 1_ proto__ : HTMLCollection
# document . getElementsByTagName( 'div')

# HTMLCollection(3) [div#d1， div, div, d1: div#d1 ]
# let divEle = document. getElementsByTagName('div')[1] 
# divEle
# <div>*div>div*</div>.
# 当你用变量名指代标签对象的时候一般情况下都推荐你书写成
# XXXEle 
# divEle
# aEle
# pEle
# --------------------------------------------
# ●间接查找(熟悉)
# let pEle = document . getElementsByClassName('c1')[0] # 注意是否需要索引
# 取值
# I
# pEle. parentElement # 拿父节点
# <div id=●"d1">● "div
# "<div>*div>div*</div>*<p class=*"c1">...
# ●</p>*<p>●div>p*</p>*</div>.
# pEle . parentElement . parentEl ement
# <bod.>...</body>.
# pEle. parentElement. parentElement . parentElement
# <html lang="en">.<head>● ..</head>●<body>●..</body>*</html>●
# pEle. parentElement. parentElement . parentElement. parentElement
# null
# let divEle = document. getElementById( 'd1')
# divEle. children # 获取所有的子标签
# divEle. children[0]
# <div>div>div*</div>.
# divEle. firstElementChild
# <div>.div>div●</div>.
# divEle. lastElementChild
# <p>*div>p*</p>.
# divEle. nextElementSibling # 同级别下面第一个
# <div>.div下面div*</div>.
# divEle . previousElementSibling
# #同级别上面第一个
# <div>●div.上面的div●</div>●
# --------------------------------------------
# 节点操作
# 通过DOM操作动态的创建img标签
# 并且给标签加属性
# 最后将标签添加到文本中
# ”””
# let imgEle = document . createElement( ' img') 
# imgEle.src = '111.png’ # 给标签设置默认的属性
# “111 . png"
# imgEle
# imgEle. username = ' jason' # 自定义的属性没办法点的方式直接设置
# ' jason
# imgEle
# <img src=."111.png">.
# imgEle. setAttribute( 'username', 'jason') # 既可以设置自定义的属性也可以设
# 置默认的书写
# undef ined
# imgEle
# <img src=●"111 . png" username=● "jason">.
# imgEle. setAttribute('title','- -张图片')
# imgEle
# <img src=."111. png" username=."jason" title=."- -张图片">.
# let divEle = document . getElementById('dl')
# undef ined
# divEle. appendChild( imgEle) # 标签内部添加元素(尾部追加)
# <img src=."111. png" username=."jason" title=."- -张图片">.
# --------------------------------------------
# 创建a标签
# 设置属性
# 设置文本
# 添加到标签内部
# 添加到指定的标签的.上面
# I
# let aEle = document . createElement('a')
# aEle
# <a>*</a>●
# aEle.href = ' https: / /www . mzitu .com/ '
# "https://www .mzitu. com/"
# aEle
# <a href=●"https:●/./ ●www . mzitu.com/.">*</a>.
# aEle. innerText = ' 点我有你好看!’# 给标签设置文本内容
# '点我有你好看!
# aEle 
# <a href=." https:●/./ www. mzitu .com/●">.点我有你好看!.</a>.
# 1et divEle = document. getEl ementById('d1')
# undef ined
# let pEle = document . getEl ementById( 'd2' )
# undef ined
# divEle. insertBefore ( aEle, pEle)
# #添加标签内容指定位置添加
# <a href-."https:●/./●www . mzitu. com/●">●点我有你好看!.</a>.
# --------------------------------------------
# # innerText与 innerHTML
# divEle. innerText # 获取标签内部所有的文本
# "div点我有你好看!
# div>p
# div>span"
# divEle. innerHTML # 内部文本和标签都拿到
# "div 
# <a href=" https:/ /www. mzitu . com/ ">点我有你好看!</a><p
# id=" d2">div&gt;p</p>
# <span>div&gt ; span</ span>
# divEle. innerText =' heiheihei '
# "heiheihei"
# divEle. innerHTML = ' hahahaha '
# "hahahaha"
# divEle. innerText = '<h1>heiheihei</h1>' # 不识别html标签
# "<h1>heiheihei</h1>"
# divEle. innerHTML = '<h1>hahahaha</h1>' # 识别htm1标签
# "<h1>hahahaha</h1>" 
# --------------------------------------------
# 获取值操作
#let pEle = document . getElementsByClassName('c1')[0] 
# pEle.value
# pEle.files[0]  文件获取
# --------------------------------------------
# class操作
# let divEle = document . getElementById('d1')
# undef ined
# divEle. classList # 获取标签所有的类属性
# DOMTokenList(3) ["c1", "bg_ red", "bg_ green", value: "c1 bg_ redbg_ green"]
# divEle. classList. remove('bg_ red') # 移除某个类属性
# undef ined
# divEle. classList.add('bg_ red') # 添加类属性
# undef ined
# divEle. classList. contains('c1') # 验证是否包含某个类属性
# true 
# divEle. classList. contains('c2')
# false
# divEle. classList. toggle('bg_ red') # 有则删除无则添加
# false 
# divEle. classList. toggle('bg_ red' )
# true 
# --------------------------------------------
# css操作
# # DOM操作操作标签样式统-先用sty1e起手
# let pEle = document . getEl ementsByTagName('p' )[0]
# undef ined
# pEle.style.color = ' red'
# red'
# pEle. style. fontSize = ' 28px'
# " 28px
# pEle . style . backgroundColor = ' yellow
# "yellow"
# pEle. style.border = '3px solid red '
# "3px solid red"
# ============================================
# 总结
# BOM操作
# window.navigator.userAgent                                         返回请求用户
# window.location.href                                             获取当前页面的url
# window.location.href = url                                      跳转指定的url
# alret     警告框
# confirm   确认选项框
# prompt    显示输入框
# setTimeout(func1,3000)                                              定时调用一次
# setInterval(func1,3000)                                                定时调用多次
# cleartimeout(上面俩个的对象：let x = setTimeout(func,1))                  关闭调用


# DOM操作
# 定位方式 
# document.getElementById("d1")                                 根据id定位
# document.getElementsByTagName('p')[0]                        根据class定位
# document.getElementsByClassName('right-show')[0]             根据类定位

# let pEle = document.getElementsByTagName('p')[8]             定义了一个标签位置对象
# pEle.parentElement                                          拿到父标签
# zEle.children[0]                                           拿到所有儿子标签
# zEle.firstElementChild                                     拿到第一个儿子标签
# zEle.lastElementChild                                      拿到第二个儿子标签

# let imgsEle = document.createElement('img')                创建一个标签
# imgsEle.setAttribute('src','11.jpg')                       给标签加对应的属性
# c2.appendChild(imgsEle)                                    将上一个标签添加到定位的标签后
# imgsEle.insertBefore ( c2, c1)                               将上一个标签添加到定位的标签后

# aEle.innerText = 'asdasdasd'                            先添加一个a标签给标签添加文字
# aEle.innerHTML = '<b>asdasdasd</b>'                       先添加一个a标签给标签添加文字（可以识别标签）
# aEle.innerText   aEle.innerHTML                          获取a标签的文字    获取a标签的文字和url

#let pEle = document . getElementsByClassName('c1')[0]                 获取值
# pEle.value                                         
# pEle.files[0]                                                        获取文件

# pEle.style.color                                                   写一个css样式

# divEle. classList                                                     获取标签所有的类属性
# divEle. classList. remove('bg_ red')                               移除某个类属性
# divEle. classList. contains('c1')                            验证是否包含某个类属性没有加返回flase，有返回true
# divEle.classlist.toggle('c')                                      验证是否包含某个类属性没有加，有就删
# ============================================  